<template>
    <div class="index">
        <div class="header">
            <div class="container clearfix">
                <el-menu theme="dark" :default-active="activeIndex" mode="horizontal"
                         @select="handleSelect">
                    <el-menu-item index="1">处理中心</el-menu-item>
                    <el-menu-item index="2">订单管理</el-menu-item>
                    <el-submenu index="3">
                        <template slot="title">我的控制台</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                        <el-menu-item index="3-3">设置</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
        </div>
        <el-row>
            <el-col :span="4">
                <el-menu theme="dark" style="min-height: calc(100vh - 60px)" default-active="1"
                         class="el-menu-vertical-demo" router unique-opened>
                    <el-menu-item index="home">
                        <i class="el-icon-information"></i>系统信息
                    </el-menu-item>
                    <el-menu-item index="software">
                        <i class="el-icon-menu"></i>软件管理
                    </el-menu-item>
                    <!--<el-menu-item index="Info">-->
                        <!--<i class="el-icon-document"></i>注册管理-->
                    <!--</el-menu-item>-->
                    <el-menu-item index="message">
                        <i class="el-icon-message"></i>消息管理
                    </el-menu-item>

                    <el-submenu>
                        <template slot="title"><i class="el-icon-setting"></i>系统管理</template>
                        <el-menu-item index="1-1">出售设置</el-menu-item>
                        <el-menu-item index="1-2">员工列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="more">
                        <template slot="title"><i class="el-icon-plus"></i>用户管理</template>
                        <el-menu-item index="user">本站用户</el-menu-item>
                        <el-menu-item index="user3">第三方用户</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3"><i class="el-icon-warning"></i>账号安全</el-menu-item>
                </el-menu>
            </el-col>

            <el-col :span="20" class="page">
                <router-view></router-view>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: 'index',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .el-menu-item [class^=fa] {
        vertical-align: baseline;
        margin-right: 8px;
    }

    .page {
        padding: 20px 20px;
    }
</style>
